<template>
  <div class="errorpage" id="bgstar" ref="bgstar">
    <div class="dao" @click="gotopage">
      <el-progress
        :indeterminate="false"
        type="circle"
        :percentage="percentage"
        :status="percentage == 100 ? 'success' : 'warning'"
        :width="70"
        :stroke-width="4"
      >
        <template #default="{ percentage }">
          <span class="percentage-value">{{ percentage }}%</span>
        </template>
      </el-progress>
    </div>
    <img :src="Pic" class="myimg" alt="" />
    <!-- Pic是一个变量，所以需要v-bind -->
    <span class="spandot" v-for="(l, i) in spanList" :key="i" :style="l">
    </span>
  </div>
</template>

<script setup lang="ts">
// 这种setup 不需要 暴露 return
import { ref, reactive, toRefs, onMounted,onUnmounted} from "vue";
import { useRouter } from "vue-router";
import Pic from "@/assets/images/503.png";
let timer: any = null;
interface StyleObj {
  left?: string;
  top: string;
  transform: string;
  background: string;
  animationDelay: string;
}
const count = ref<number>(5);
const bgstar = ref<any>();
const router = useRouter();
const state = reactive({
  text: "hello",
  flag: false,
  percentage: 0,
});
const { flag, text, percentage } = toRefs(state); //转成一个普通对象 引用数据
const spanList = ref<Array<StyleObj>>([]);
const gotopage = () => {
  router.push({ name: "login" });
};
const timeDown = (): void => {
  timer = setInterval(() => {
    if (state.percentage < 100) {
      state.percentage += 4;
    } else {
      clearInterval(timer);
      timer = null;
      gotopage();
    }
  }, 200);
};
onMounted(()=>{
  timeDown();
  getSpanInit();
})
onUnmounted(()=>{
  clearInterval(timer);
  timer = null;
})

const getSpanInit = () => {
      var width = bgstar.value.clientWidth;
      var height = bgstar.value.clientHeight;
      // console.log(width, height);
      for (var i = 0; i < 520; i++) {
        var left = Math.random() * width;
        var top = Math.random() * height;
        var scaler = Math.random() * 1.5;
        var rate = Math.random() * 2.5;
        var opacity = Math.random() * 1;
        var r = 255;
        var g = 255;
        var b = 255;

        spanList.value.push({
          left: left + "px",
          top: top + "px",
          transform: `scale(${scaler})`,
          background: `rgba(255,255,255,${opacity})`,
          // background: `rgba(${r},${g},${b},${opacity})`,
          animationDelay: rate + "s",
        });
      }
    };

</script>

<style lang="scss" scoped>
.errorpage {
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  padding: 0 !important;
  overflow: hidden;
  .down {
    position: absolute;
    left: 20px;
    top: 20px;
    border: 1px solid #fff;
    color: #fff;
    width: 70px;
    height: 30px;
    border-radius: 10px;
    text-align: center;
    line-height: 30px;
  }
  .dao {
    position: absolute;
    top: 20px;
    right: 20px;
    ::v-deep .van-circle__text {
      color: #fff !important;
    }
  }
  .myimg {
    width: 270px;
    height: 270px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
  }
  .spandot {
    position: absolute;
    z-index: 100;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;
  }
  @keyframes flash {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.5;
    }
  }
}
</style>
